const HtmlwebpackPlugin = require('html-webpack-plugin');
//const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')

//暴露的文件，增加webpack扩张功能
module.exports = {
    //1：文件入口
    entry:{
        main: './01_手写_src/main.js'
    },
    //2：输出文件
    output:{
        path: __dirname + '/03_生成_dist',
        //生成全新dist目录（谨防有垃圾文件）
        clean: true,
    },
    //3：h5插件HtmlwebpackPlugin，vue插件
    plugins:[
      new HtmlwebpackPlugin({
          template: './02_设置_public/index.html',
          title: '24_webpack_cli_basic',
      }),
      new VueLoaderPlugin()
    ],
    //4：dist目录与src映射文件,要找到源代码文件，不然编译或运行错不好找
    devtool:'inline-source-map',
    //5：css模块加载，图片加载，vue模块加载
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg"gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.vue$/i,
                use: ['vue-loader']
            }
        ]
    },
    //开发模式
    mode: 'development'
}